<template>
	<view class="box">
		<u--form labelPosition="left" :model="fromInfo" ref="uForm">
			<view class="main p-l-r-32 bg-color">
				<u-form-item label="主题" prop="name" borderBottom :required="true" labelWidth="100" class="">
					<u--input v-model="fromInfo.name" border="none" placeholder="请输入主题" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="签署截止日期" prop="name" borderBottom :required="true" labelWidth="100" class="">
					<view @click="showDatetime = true" style="width: 100%; ">
						<u--input v-model="fromInfo.time" border="none" placeholder="请选择签署截止日期" @focus="show = true"
							disabled disabledColor="#fff" suffixIcon="arrow-right"
							suffixIconStyle="color: rgba(0, 0, 0, 0.60)" inputAlign="right"></u--input>
					</view>
				</u-form-item>
				<u-form-item label="标签" prop="name" borderBottom :required="true" labelWidth="100" class="">
					<view @click="showLabel = true" style="width: 100%; ">
						<u--input v-model="fromInfo.name" border="none" placeholder="请选择标签" @focus="selectShow = true"
							disabled disabledColor="#fff" suffixIcon="arrow-right"
							suffixIconStyle="color: rgba(0, 0, 0, 0.60)" inputAlign="right"></u--input>
					</view>
				</u-form-item>
				<u-form-item label="备注" prop="name" labelWidth="100" class="">
				</u-form-item>
				<u-form-item prop="name" labelWidth="100" class="">
					<u--textarea v-model="fromInfo.name" placeholder="请输入备注内容" :count="true"></u--textarea>
				</u-form-item>

			</view>
			<view class="main p-l-r-32 bg-color ">
				<u-form-item label="签署文件(0/50)" prop="name" :required="true" labelWidth="200" class="">
					<view style="width: 100%;justify-content: right;" class="flex">
						<text>上传记录</text>
						<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.60)" size="18"></u-icon>
					</view>
				</u-form-item>
				<view class="">
					<view class="flex" style="margin-bottom: 24rpx;">
						<view class="flex-1 flex">
							<u-icon name="file-text" color="rgba(0, 0, 0, 0.60)" size="16" style="margin-top: 6rpx;"></u-icon>
							<view class="flex line-clamp-1" style="margin-left: 2rpx;">
								<text class="font-size-28 font-color-1">新员工入职合同模板@2023版新员工入职合同模板@2023版</text>
							</view>
						</view>
						<u-icon name="close" color="rgba(0, 0, 0, 0.60)" size="14" style="margin-top: 6rpx;"></u-icon>
					</view>
					<view class="flex" style="margin-bottom: 24rpx;">
						<view class="flex-1 flex">
							<u-icon name="file-text" color="rgba(0, 0, 0, 0.60)" size="16" style="margin-top: 6rpx;"></u-icon>
							<view class="flex line-clamp-1" style="margin-left: 2rpx;">
								<text class="font-size-28 font-color-1">新员工入职合同模板@2023版新员工入职合同模板@2023版</text>
							</view>
						</view>
						<u-icon name="close" color="rgba(0, 0, 0, 0.60)" size="14" style="margin-top: 6rpx;"></u-icon>
					</view>
				</view>
				<view class="flex" style="padding-bottom: 16rpx;">
					<u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
					<text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">签署文件</text>
				</view>
				<u-line></u-line>
			</view>

			<view class="main p-l-r-32 bg-color">
				<u-form-item label="签署方" prop="name" :required="true" labelWidth="100" class="">
					<view style="width: 100%;justify-content: right;" class="flex" @click="hanleClick('/pages/contract/signed')">
						<text>顺序签署</text>
						<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.60)" size="18"></u-icon>
					</view>
				</u-form-item>
				<view class="">
					<view class="sign-border">
						<text>请至少添加一位签署方</text>
					</view>
					<view class="flex sign" style="">
						<view class="list">
							<view>
								<image src="../../static/logo.png"></image>
							</view>
							<view>
								<text>刘金鹏</text>
								<text>15932178945</text>
							</view>

						</view>
						<view class="small-close">
							<u-icon name="close" color="#fff" size="16"></u-icon>
						</view>
						<view class="tag">企业签署方</view>
					</view>
					<view class="flex sign" style="">
						<view class="list">
							<view>
								<image src="../../static/logo.png"></image>
							</view>
							<view>
								<text>刘金鹏</text>
								<text>15932178945</text>
							</view>

						</view>
						<view class="small-close">
							<u-icon name="close" color="#fff" size="16"></u-icon>
						</view>
						<view class="tag">企业签署方</view>
					</view>

				</view>
				<view class="flex" style="padding-bottom: 16rpx;">
					<u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
					<text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">个人/企业</text>
				</view>
				<u-line></u-line>
			</view>

		</u--form>
		<!-- 底部按钮 -->
		<view class="flex bottom-button">
			<u-button type="error" text="删除" class="custom-style" @click="hanleBtn"
				:customStyle="{borderRadius:'0rpx',border:'none',padding:'0',height:'auto'}"></u-button>
			<u-button type="primary" text="存为模板" class="custom-style" @click="hanleBtn" iconColor=""
				:customStyle="{borderRadius:'0rpx',border:'none',padding:'0',height:'auto'}"></u-button>
		</view>

		<!-- 弹出框 -->
		<u-datetime-picker :show="showDatetime" mode="date" @cancel="cancel" :formatter="formatter"
			@confirm="confirm"></u-datetime-picker>
		<u-action-sheet :show="showLabel" :actions="actions" title="请选择标签" @close="showLabel = false"
			@select="labelSelect">
		</u-action-sheet>

	</view>
</template>

<script>
	import {goNav} from "../../utils/common";

  export default {
		data() {
			return {
				tabIndex: 1,
				showDatetime: false,
				selectShow: false,
				showLabel: false,
				fromInfo: {
					name: '',
					sex: '',
					time: '',
					goodsType: ''
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				selectList: [{
						value: '电子产品',
						label: '电子产品'
					},
					{
						value: '服装',
						label: '服装'
					},
					{
						value: '工艺品',
						label: '工艺品'
					}
				],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}, ],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					}, ],
					goodsType: [{
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					}, ],
				},
				selectList: [{
						value: '男',
						label: '男'
					},
					{
						value: '女',
						label: '女'
					},
					{
						value: '保密',
						label: '保密'
					},
				],
			};
		},
		methods: {
			hanleTab(index) {
				this.tabIndex = index;

			},
			selectConfirm(e) {

			},
			cancel() {
				this.showDatetime = false
			},
			confirm(e) {
				const timeFormat = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.fromInfo.time = timeFormat
				console.log(timeFormat, this.fromInfo.time)
				this.cancel()
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			labelSelect() {

			},
			//保存草稿
			hanleAdd() {

			},
			hanleClick(url){
				goNav(url);
			}
		},
		onReady() {

		},
	};
</script>

<style scoped lang="scss">
	.main {
		margin-top: 16rpx;

		.sign-border {
			height: 246rpx;
			border: 2rpx #CCCCCC dotted;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.4);
			margin-bottom: 42rpx;
		}

		.sign {
			width: 100%;
			background: #F3F3F3;
			position: relative;
			margin-bottom: 36rpx;

			.small-close {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 0;
				top: 0;
				text-align: center;
				background-color: rgba(0, 0, 0, 0.70);
			}

			.tag {
				width: auto;
				height: 32rpx;
				padding: 0 16rpx;
				color: #fff;
				background: #4787F0;
				position: absolute;
				left: 0;
				bottom: 0;
				border-radius: 0rpx 24rpx 24rpx 0rpx;
				font-size: 18rpx;
				text-align: center;
				line-height: 32rpx;
			}

			.tag-active {
				background-color: rgba(237, 123, 47, 1);
			}

			.tag-f {
				background-color: rgba(0, 168, 112, 1);
			}

			.list {
				display: flex;
				padding: 24rpx 20rpx;
				justify-content: center;
				align-items: center;
				padding-bottom: 52rpx;

				image {
					width: 56rpx;
					height: 56rpx;
					margin-right: 16rpx;

				}

				text {
					display: block;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.90);
					padding: 4px 0;
					font-size: 26rpx;
				}
			}
		}

	}

	.bottom-button {
		margin-top: 80px;
	}
</style>